<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
       #tabsecond li{
           float: left;
           background-color: #ffffff;
           color: blue;
           padding: 10px;
           margin-right: 2px;
           cursor: pointer;  /*鼠标移上去就会变成一个手*/
           list-style: none;
       }
       #tabsecond li.tabin{
           background-color: #f2f6f8;
           border: 1px solid black;
           border-bottom: 0;
            z-index: 100;
           position: relative;
       }
        .contentsecond{
            width: 500px;
            height: 200px;
            padding: 10px;
            background-color: #f2f6f8;
            clear: left;
            border: 1px solid black;
            top: -1px;
            position: relative;
        }
    </style>
</head>
<body>
    <ul id="tabsecond">
        <li class="tabin">装载完成页面</li>
        <li>装载部分页面</li>
        <li>装载网络数据</li>
    </ul>
    <div class="contentsecond">
        <div id="realcontent"></div>
    </div>



<script>
    /*js完成切换,each()的功能是每碰到一个li元素就去改变他*/
    $(document).ready(function(){
        $("#realcontent").load("数据加载里面新的页面.html");
        $("#tabsecond li").each(function(){
            $(this).click(function(){
                $("#tabsecond li.tabin").removeClass("tabin");
                $(this).addClass("tabin");
                if(index==0){
                    $("#realcontent").load("数据加载里面新的页面.html")
                }else if(index==1){
                    $("#realcontent").load("数据加载里面新的页面.html")

                }else if(index==2){
                    $("#realcontent").load("数据加载里面新的页面.html")

                }
            })
        })
    })
</script>
</body>
</html>